<template>
    <div>
        <div id="markdown-editor"></div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import Vditor from 'vditor'
import "vditor/src/assets/less/index.less"

const props = defineProps(['defaultValue'])

let vditor;

const cacheId = "markdowCache"

onMounted(() => {
    vditor = new Vditor("markdown-editor", {
        height: "88vh",
        cache: {
            id: cacheId
        },
        after(){
            vditor.focus()
        },
        value: props.defaultValue
    })
})

defineExpose({
  getData: () => vditor.getValue(),
  setData: data => vditor.setValue(data),
  blur: () => vditor.blur(),
  getCacheValue: () => localStorage.getItem(cacheId),
  clearCache: () => vditor.clearCache()
})
</script>

<style scoped></style>